<template>
  <div class="perfect-inform">

    <div class="i-form-item">
      <span>用户名:</span><input v-model="formData.username" disabled type="text" class="account-disabled"/>
    </div>
    <div class="i-form-item name">
      <span>姓名:</span><IInput v-model="formData.name" p-placeholder="请输入姓名..." :p-max-length="8" type="text"/>
    </div>
    <div class="i-form-item">
      <select id="sex-select" v-model="formData.sex">
        <option value="1">男</option>
        <option value="2">女</option>
      </select>

      <Calendar class="birthday" :p-date="formData.birthday" title="出生日期:" @changeDate="date => this.formData.birthday = date"></Calendar>

    </div>
<!--    <div class="i-form-item">-->
<!--    </div>-->
    <div class="i-form-item tel">
      <span>手机号:</span><NumInput v-model="formData.tel" p-placeholder="请输入11位手机号..." :p-max-length="11" type="text"/>
    </div>
    <div class="i-form-item address">
      <span>地址:</span><IInput v-model="formData.address" p-placeholder="请输入地址..." :p-max-length="40" type="text"/>
    </div>

    <button @click="handleSubmit" class="i-from-item-btn">完善信息</button>

  </div>
</template>

<script>
  import IInput from 'components/common/input/ordInput/IInput'
  import NumInput from 'components/common/input/numInput/IInput'
  import Calendar from "components/common/calendar/Calendar";

  // 网络请求方法
  import {prefectUserInfo} from 'network/user'

  export default {
    name: "RegisterInfoPrefect",
    components: {
      IInput,
      NumInput,
      Calendar,

    },
    data() {
      return {
        formData: {
          username: '',
          password: '',
          name: '',
          sex: 1,
          birthday: new Date(),
          tel: '',
          address: '',

          money: 0,
          business: 2 // 默认非商家
        },

        // nameVer: false,
        // telVer: false,
        // addressVer: false,
      }
    },
    beforeCreate() { // 在创建组件之前
      // console.log('挂载-----');
      this.$bus.$on('registerGoReady', ({account, password}) => { // 获取事件总线发来的registerGoReady事件
        // console.log('registerGoReady事件已经通过事件总线接收' + account + '-----' + password);
        this.formData.username = account
        this.formData.password = password
      })
    },
    methods: {
      handleSubmit() {
        // console.log();
        // console.log(this.formData);
        prefectUserInfo(this.formData)
          .then(res => {
            // console.log(res);
            // if (res.code === 200) { // code为200表示完善信息成功
              this.$succ_ty_toast.toShow(this.formData.username + '用户,您已完善信息,请登录', 5000)
              this.$router.push('/login')
            // } else if (res.code === 500) {
            //   this.$err_ty_toast.toShow(this.formData.username + '用户,信息完善失败', 5000)
            // }
          })
          .catch(err => {
            console.log('<完善信息>网络请求函数问题' + err);
          })

      },
    }
  }
</script>

<style scoped>
  .perfect-inform {
    width: 100%;
    /*background-color: black;*/
  }

  .i-form-item {
    position: relative;
    left: 24%;

    width: 76%;
    height: 35px; /*设置该item的高度,否则提示信息撑开盒子*/

    margin-top: 4%;

    /*background-color: red;*/
  }
  .i-form-item span {
    font-weight: bold;
    font-size: 20px;

    color: #434343;
  }
  .name span {
    margin-right: 20px;
  }
  .address span {
    margin-right: 17px;
  }
  .i-form-item select {
    position: absolute;
    left: 10%;
    width: 60px;
    height: 36px;
  }
  .i-form-item .birthday {
    position: absolute;
    top: 0;
    left: 28%;
  }

  .account-disabled {
    height: 32px;
    width: 200px;
  }

  .i-from-item-btn {
    position: absolute;
    left: 20%;
    bottom: 20%;

    color: #ffffff;
    font-size: 20px;
    font-weight: bold;

    border-radius: 6px;
    background-color: red;
    border: none;
    outline: none;

    width: 60%;
    height: 34px;
  }
  .i-from-item-btn:hover {
    cursor: pointer; /*放上变手指*/
    opacity: 0.7;
  }
</style>